<template>
	<view class="page" :style="{'min-height': h + 'px'}">
		<c-nav-bar :title="titleHeader" bgColor="transparent"></c-nav-bar>
		<image class="bg" src="https://i.ringzle.com/file/20240229/cd4ba6a1877c46808f937819fe7b5dc2.png"></image>
		<view class="zxkf_mian" :style="{ 'padding-top': mt + 'px' }">
			<view class="zxkf_top">
				<view class="zt_top">
					<view class="ztt_text">
						<view class="zttt_hi">Hi～，有什么可以帮您！</view>
						<view class="zttt_tip">泗海为您服务</view>
					</view>
					<image src="https://fsy.shengsi.gov.cn/file/20240717/1dcf8d90848a48ac9d1f9fe0643b9538.png">
					</image>
					<button @tap="openCustomerServiceChat"></button>
				</view>
				<view class="zt_bottom">
					<view @tap="Shortcut(4)">
						<image src="https://i.ringzle.com/file/20240229/b5ae18f3ab97419bb88c78e94c68f0de.png"></image>
						<text>船票相关</text>
					</view>
					<view @tap="Shortcut(3)">
						<image src="https://i.ringzle.com/file/20240229/d2ed9abe7c364874b5868837453c6bca.png"></image>
						<text>酒店民宿</text>
					</view>
					<view @tap="Shortcut(2)">
						<image src="https://i.ringzle.com/file/20240229/5c4242abc6d74b009e4e0b36b09e8c52.png"></image>
						<text>景点门票</text>
					</view>
					<view @tap="Shortcut(1)">
						<image src="https://i.ringzle.com/file/20240229/a8863ca86b8e486790bf66f235a1d666.png"></image>
						<text>退款问题</text>
					</view>
				</view>
			</view>
			<view class="zxkf_content">
				<scroll-view :scroll-into-view="scrollTop" :scroll-y="true" style="height: 100%">
					<view class="mainTop">
						<view class="main">
							<view class="main1">
								<span id="caini">猜你想问</span>
								<!-- <span @tap="changeData" class="hyp" style="color: #999;font-size: 28rpx;display: flex;align-items: center;">
									换一批
									<u-icon name="reload" color="#999999" size="36"></u-icon>
								</span> -->
							</view>
							<view class="main2 zxkf_qa">
								<block v-if="JSON.stringify(questionList) != '{}'">
									<u-collapse :border="false" accordion @change="change" @close="close" @open="open">
										<u-collapse-item :title="item[0].questionName" name="Docs guide"
											v-for="(item, index) in questionList" :key="index">
											<text class="u-collapse-content">{{ item[0].name }}</text>
										</u-collapse-item>
									</u-collapse>
								</block>
							</view>
						</view>
					</view>
					<view class="mainContent">
						<view class="chatContent" v-for="(item, index) in myQuestionList" :key="index">
							<view class="top1" v-if="item.type == 1">
								<image src="https://i.ringzle.com/file/20240117/4112480ff57f421d89aa64081fc6df46.png"
									mode="">
								</image>
								<span>{{ item.value }}</span>
							</view>
							<view class="top1" v-else-if="item.type == 2">
								<image src="https://i.ringzle.com/file/20240117/4112480ff57f421d89aa64081fc6df46.png"
									mode="">
								</image>
								<span>抱歉，您说的问题我还在努力学习！<br />
									<span class="top1_1" @click="goHref()">
										<u-icon name="server-fill" color="#025EA7" size="28"></u-icon>
										<span style="margin-left: 10rpx"> 联系人工客服 </span>
									</span>
								</span>
							</view>
							<view class="chatContent1" v-else-if="item.type == 3">
								<span id="chatContent1_1">{{ item.value }}</span>
								<span id="chatContent1_my">我</span>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- <view class="zxkf_botom">
			<input type="text" placeholder="请输入您的问题" v-model="value" @change="change">
			<view class="zb_send" @tap="submit">发送</view>
		</view> -->




		<u-popup :show="cpzxShow" @close="cpzxShow=false" mode="center">
			<view class="cpzx_box">
				<view class="cb_close">
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="cpzxShow=false"></image>
				</view>
				<view class="cb_code">
					<image :show-menu-by-longpress="true"
						src="https://i.ringzle.com/file/20240612/a87125e461324662b81f58be32ec3003.png"></image>
				</view>
				<view class="cb_texts">
					<view class="cbt_top">
						<view>长按图片<br>识别二维码</view>
						<view>添加客服<br>[游嵊泗]</view>
					</view>
					<view class="cbt_tip">
						关于旅行中的问题，可以向<br>
						我提问，与您一对一服务～
					</view>
				</view>
				<image class="cb_hi" src="https://i.ringzle.com/file/20240112/761cc0fbd5954ec594c113ccea1359b7.png">
				</image>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: "",
				questionList: {},
				titleHeader: "在线客服",
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				value: "",
				tagList: [{
						name: "联系人工客服",
					},
					{
						name: "小菜园码头",
					},
					{
						name: "花鸟岛码头",
					},
					{
						name: "联系人工客服",
					},
					{
						name: "小菜园码头",
					},
					{
						name: "花鸟岛码头",
					},
					{
						name: "联系人工客服",
					},
					{
						name: "小菜园码头",
					},
					{
						name: "花鸟岛码头",
					},
				],
				myQuestionList: [],
				answerList: [],
				cpzxShow: false,
				type: "",
			};
		},
		onLoad() {
			console.log("this.h,", this.h - 310 + this.mt);
			console.log("this.mt,", 310 - this.mt);
			this.getQuestion();
		},
		methods: {
			goHref() {
				uni.navigateTo({
					url: "/pagesTaxi/onlineCustomers/staffService",
				});
			},
			openCustomerServiceChat: function() {
			    wx.openCustomerServiceChat({
			      extInfo: {url: 'https://work.weixin.qq.com/kfid/kfcbdf9c7a445d4d1dd'},
			      corpId: 'ww127277f75261ec6e', // 替换为你的企业ID
			      success(res) {
			        console.log('成功打开客服聊天界面');
			      },
			      fail(err) {
			        console.log('打开客服聊天界面失败', err);
			      }
			    });
			},
			Shortcut(index) {
				switch (index) {
					case 1:
						this.type = 3;
						this.getQuestion();
						break;
					case 2:
						this.type = 4;
						this.getQuestion();
						break;
					case 3:
						this.type = 5;
						this.getQuestion();
						break;
					case 4:
						this.type = 6;
						this.getQuestion();
						break;
				}
			},
			submit() {
				if (this.value) {
					this.myQuestionList.push({
						value: this.value,
						type: 3,
					});
					this.getAnswer(this.value);
				}
			},
			getQuestion() {
				this.questionList = {};
				this.$api
					.get("/api/onlineservice/list", {
						type: this.type || "",
					})
					.then((res) => {
						if (res.data.code == 0) {
							this.questionList = res.data.data;
						}
					});
			},
			changeData() {
				this.getQuestion();
			},
			getAnswer(value) {
				this.$api
					.get("/api/onlineservice/getAnswer", {
						question: value,
					})
					.then((res) => {
						// this.questionList = res.data.data
						if (!res.data.data[0].questionId) {
							this.myQuestionList.push({
								value: res.data.data[0].name,
								type: 2,
							});
							return;
						} else {
							this.myQuestionList.push({
								value: res.data.data[0].name,
								type: 1,
							});
						}
					});
			},
			change(e) {
				console.log(e, "eeeeee");
			},
			close() {},
			open() {},
			showKf() {
				this.cpzxShow = true;
				// this.$showToast("正在开发中...");
			},
		},
	};
</script>

<style>
	.zxkf_qa .u-collapse-item .u-icon__icon {
		font-size: 24rpx !important;
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-scroll-list {
		margin: 25rpx 14rpx;
	}

	::v-deep .hyp {
		.u-icon__icon {
			margin: 6rpx 0 0 10rpx;
		}
	}

	::v-deep .u-input {
		padding: 0;
		position: relative;
		top: 16px;
		left: 36rpx;
		width: 380rpx;
	}

	::v-deep .u-cell__body {
		padding: 7px 3px !important;
	}

	::v-deep .u-collapse-item__content__text {
		padding: 4px 5px;
	}

	.page {
		// height: 100vh;
		background: #f1faff;
		position: relative;
		box-sizing: border-box;
		// height: calc(100vh - 98px);

		.bg {
			width: 100%;
			height: 620rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.zxkf_mian {
			display: flex;
			flex-direction: column;
		}

		.zxkf_top {
			position: relative;

			.zt_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 60rpx;
				position: relative;

				.ztt_text {
					.zttt_hi {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 40rpx;
						color: #333333;
						line-height: 40rpx;
					}

					.zttt_tip {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #777777;
						line-height: 40rpx;
						margin-top: 20rpx;
					}
				}

				&>image {
					width: 230rpx;
					height: 230rpx;
				}
				
				button{
					width: 140rpx;
					height: 220rpx;
					position: absolute;
					right: 0;
					bottom: 10rpx;
					background: transparent;
					z-index: 999;
					&::after{
						width: 0 !important;
						height: 0 !important;
					}
				}
			}

			.zt_bottom {
				width: calc(100% - 48rpx);
				height: 194rpx;
				margin: 0 24rpx;
				background: #ffffff;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				&>view {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					image {
						width: 92rpx;
						height: 90rpx;
					}

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #111111;
						line-height: 30rpx;
						margin-top: 20rpx;
					}
				}
			}
		}

		.zxkf_content {
			width: 100%;
			// background: #F5F8FA;
			overflow-y: auto;
			position: relative;

			padding: 0 29rpx 35rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.mainContent {
				// margin-bottom: 300rpx;

				.chatContent {
					margin-top: 18rpx;

					.top1 {
						display: flex;
						flex-direction: row;

						.top1_1 {
							display: flex;
							color: #025ea7;
							border: 1rpx solid #025ea7;
							padding: 10rpx 20rpx;
							border-radius: 41rpx;
							width: fit-content;
							margin-top: 10rpx;
						}

						&>image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 40rpx;
						}

						&>span {
							margin-left: 26rpx;
							background: #fff;
							border-radius: 20rpx;
							padding: 20rpx;
							box-sizing: content-box;
							white-space: pre-wrap;
							max-width: 60%;
							max-height: 295rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 10;
							/* 控制显示的行数 */
							-webkit-box-orient: vertical;
						}
					}

					.chatContent1 {
						display: flex;
						justify-content: flex-end;
						align-items: center;

						#chatContent1_1 {
							margin-right: 26rpx;
							background: #fff;
							border-radius: 20rpx;
							padding: 20rpx;
							box-sizing: content-box;
							white-space: pre-wrap;
							max-width: 60%;
						}

						#chatContent1_my {
							font-size: 45rpx;
							width: 80rpx;
							height: 80rpx;
							border-radius: 40rpx;
							color: white;
							background: #025ea7;
							line-height: 80rpx;
							text-align: center;
						}
					}
				}
			}

			.mainTop {
				display: flex;
				justify-content: center;

				.main {
					background: #fff;
					border-radius: 25rpx;
					padding: 20rpx;
					width: 100%;

					.main1 {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						padding: 7px 25rpx 7px 4rpx;

						#caini {
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #333333;
							line-height: 50rpx;
						}
					}
				}
			}

			.top1 {
				display: flex;
				flex-direction: row;

				&>image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
				}

				&>span {
					margin-left: 26rpx;
					background: #fff;
					border-radius: 20rpx;
					padding: 20rpx;
					box-sizing: content-box;
					white-space: pre-wrap;
					max-width: 60%;
				}
			}
		}

		.zxkf_botom {
			width: 100%;
			height: 165rpx;
			background: #ffffff;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 20rpx 24rpx 0;
			box-sizing: border-box;
			display: flex;

			input {
				width: calc(100% - 148rpx);
				height: 88rpx;
				border: none;
				background: #f5f8fa;
				border-radius: 24rpx;
				padding: 0 27rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}

			.zb_send {
				width: 132rpx;
				height: 88rpx;
				background: #007a69;
				border-radius: 24rpx;
				line-height: 88rpx;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #ffffff;
				margin-left: 16rpx;
			}
		}

		.top {
			padding: 35rpx 29rpx;
			height: 70vh;
			margin-top: 36rpx;

			.mainContent {
				margin-bottom: 300rpx;

				.chatContent {
					margin-top: 18rpx;

					.top1 {
						display: flex;
						flex-direction: row;

						.top1_1 {
							display: flex;
							color: #025ea7;
							border: 1rpx solid #025ea7;
							padding: 10rpx 20rpx;
							border-radius: 41rpx;
							width: fit-content;
							margin-top: 10rpx;
						}

						&>image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 40rpx;
						}

						&>span {
							margin-left: 26rpx;
							background: #fff;
							border-radius: 20rpx;
							padding: 20rpx;
							box-sizing: content-box;
							white-space: pre-wrap;
							max-width: 60%;
							max-height: 295rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 10;
							/* 控制显示的行数 */
							-webkit-box-orient: vertical;
						}
					}

					.chatContent1 {
						display: flex;
						justify-content: flex-end;
						align-items: center;

						#chatContent1_1 {
							margin-right: 26rpx;
							background: #fff;
							border-radius: 20rpx;
							padding: 20rpx;
							box-sizing: content-box;
							white-space: pre-wrap;
							max-width: 60%;
						}

						#chatContent1_my {
							font-size: 45rpx;
							width: 80rpx;
							height: 80rpx;
							border-radius: 40rpx;
							color: white;
							background: #025ea7;
							line-height: 80rpx;
							text-align: center;
						}
					}
				}
			}

			.mainTop {
				display: flex;
				justify-content: center;
				margin-top: 30rpx;

				.main {
					background: #fff;
					border-radius: 25rpx;
					padding: 20rpx;
					width: 80%;

					.main1 {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						padding: 7px 25rpx;

						#caini {
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #333333;
							line-height: 50rpx;
						}
					}
				}
			}

			.top1 {
				display: flex;
				flex-direction: row;

				&>image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
				}

				&>span {
					margin-left: 26rpx;
					background: #fff;
					border-radius: 20rpx;
					padding: 20rpx;
					box-sizing: content-box;
					white-space: pre-wrap;
					max-width: 60%;
				}
			}
		}

		.bottom {
			background: #fff;
			position: fixed;
			bottom: 0;
			height: 16%;
			width: 100%;
			padding: 30rpx 0;

			.tags {
				flex-direction: row;
				@include flex(column);

				.tagsItem {
					width: max-content;
					margin: 0 10rpx;
					background: #f1faff;
					padding: 13rpx;
					text-align: center;
					display: block;
					border-radius: 20rpx;
					color: #025ea7;
				}
			}

			.input {
				position: relative;
				display: flex;
				flex-direction: row;
				justify-content: space-around;

				// &>image {
				// 	width: 554rpx;
				// 	height: 106rpx;
				// 	position: relative;
				// }

				.inputItem {
					background: url("https://i.ringzle.com/file/20240106/b52dd0e46b7f47e3b2fbde0c63da0b27.png");
					background-size: cover;
					background-repeat: no-repeat;
					color: #025ea7;
					// position: absolute;
					// top: 0;
					width: 554rpx;
					height: 106rpx;

					.value {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: black;
					}
				}

				.btn {
					width: 132rpx;
					height: 80rpx;
					background: #025ea7;
					border-radius: 40rpx;
					text-align: center;
					line-height: 80rpx;
					color: white;
				}
			}

			.navi {
				display: flex;
				flex-direction: row;
				padding: 35rpx 20rpx;
				justify-content: space-evenly;
				color: #025ea7;

				.navi1 {
					display: flex;
					flex-direction: column;

					align-items: center;

					&>image {
						width: 48rpx;
						height: 48rpx;
						margin-bottom: 18rpx;
					}

					&>span {}
				}
			}
		}
	}

	::v-deep.u-popup__content {
		width: calc(100% - 142rpx);
		border-radius: 24rpx;
	}

	/deep/.u-popup__content,
	.p_box {
		// border-radius: 32rpx 32rpx 0 0;
		border-radius: 32rpx;
	}

	/deep/.cpzx_box {
		width: 608rpx;

		padding: 36rpx 40rpx 64rpx 30rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		position: relative;

		.cb_close {
			width: 100%;
			display: flex;
			justify-content: flex-end;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.cb_code {
			width: 100%;
			margin-top: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 280rpx;
				height: 280rpx;
			}
		}

		.cb_texts {
			margin-top: 107rpx;

			.cbt_top {
				display: flex;
				align-items: center;

				&>view {
					font-size: 24rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #025EA7;
					line-height: 33rpx;
					position: relative;

					&:last-child {
						margin-left: 20rpx;
						padding-left: 20rpx;

						&::before {
							content: '';
							width: 1rpx;
							height: 52rpx;
							background: #025EA7;
							position: absolute;
							top: 50%;
							margin-top: -26rpx;
							left: 0;
						}
					}
				}
			}

			.cbt_tip {
				margin-top: 20rpx;
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #111111;
				line-height: 42rpx;
			}
		}

		.cb_hi {
			width: 269rpx;
			height: 304rpx;
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 0;
		}
	}
</style>